<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          class="button"
          @click="$router.push('/questions/new')"
          size="small"
        >
          <i class="el-icon-edit"></i>
          新增试题</el-button
        >
        <el-button
          class="button"
          style="fontsize: 12px"
          type="danger"
          size="small"
          @click="exportExcel"
          >excel导出</el-button
        >
        <el-button
          class="button"
          style="fontsize: 12px"
          type="danger"
          size="small"
          @click="importExcel"
          >excel导入</el-button
        >
        <el-form label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科" class="region">
                <el-select
                  v-model="form.subjectID"
                  placeholder="请选择"
                  @click.native="listA"
                >
                  <el-option
                    v-for="item in subjectIDD"
                    :value="item.subjectName"
                    :key="item.value"
                    :label="item.subjectName"
                    @click.native="change(item, item.subjectName)"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="form.catalogID" placeholder="请选择">
                  <el-option
                    v-for="item in catalog"
                    :key="item.id"
                    :label="item.directoryName"
                    :value="item.directoryName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="form.tags" placeholder="请选择">
                  <el-option
                    v-for="item in labellist"
                    :value="item.tagName"
                    :key="item.value"
                    :label="item.tagName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.name"
                  class="qqq"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="form.questionType" placeholder="请选择">
                  <el-option
                    v-for="item in types"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" class="region">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option
                    v-for="item in clerk"
                    :key="item.index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="form.creatorID" placeholder="请选择">
                  <el-option
                    v-for="item in role"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注" prop="tags">
                <el-input class="filter-item" v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="企业简称" prop="tags">
                <el-input
                  class="filter-item"
                  v-model="form.shortName"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  v-model="form.provAndCity.province"
                  placeholder="请选择"
                  @click.native="province"
                  class="province"
                >
                  <el-option
                    v-for="item in provincee"
                    :key="item.index"
                    :label="item"
                    :value="item"
                    @click.native="city"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="form.provAndCity.city"
                  placeholder="请选择"
                  class="province"
                >
                  <el-option
                    v-for="item in cityyy"
                    :key="item.index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div class="function">
              <el-button size="small" @click="move">清除</el-button>
              <el-button size="small" type="primary" @click="seek()"
                >搜索</el-button
              >
            </div>
          </el-row>
        </el-form>

        <info :title="total" class="info"></info>

        <!-- 中间表格 -->
        <el-table
        v-loading='loading'
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#fafafa' }"
        >
          <el-table-column prop="number" label="试题标号" width="120" sortable>
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120" sortable>
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120" sortable>
          </el-table-column>
          <el-table-column
            sortable
            prop="questionType"
            label="题型"
            width="130"
            :formatter="formatter"
          >
          </el-table-column>

          <el-table-column
            prop="answer"
            v-html="tableData.answer"
            label="题干"
            width="300"
            sortable
          >
            <template #default="{ row }">
              <p v-html="row.question"></p>
            </template>
          </el-table-column>

          <!-- v-html="tableData.answer" -->
          <el-table-column prop="addDate" label="录入时间" width="190" sortable>
            <template #default="{ row }">
              {{ time(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            width="100"
            :formatter="forma"
            sortable
          >
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="140" sortable>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                @click="print(row)"
                class="view"
                title="预览"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                class="edit"
                circle
                title="查看"
                @click="$router.push(`/questions/new?id=${row.id}`)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                title="删除"
                class="delete"
                @click="del(row)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                circle
                title="加入精选"
                @click="love(row, 1)"
                class="love"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <div
            class="pager"
            style="margin: 10px; display: flex; justify-content: flex-end"
          >
            <el-pagination
              :current-page="d.page"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="d.pagesize"
              layout="total,sizes,prev,pager,next,jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-card>

      <page :show-dialog.sync="showDialog" :UserID="UserID"></page>
    </div>

      <div @dblclick="ding" v-drag class="ding" ref="two">
        <i class="el-icon-top" id="up"></i>

    </div>
    <importExcel :importDialogShow.sync="importDialogShow"></importExcel>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys'
import baseApi from '@/api/base/baseApi'
import Info from '@/components/questions/info.vue'
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { list as listApi, simple as simpleapi } from '@/api/hmmm/subjects'
import { list as listmuApi } from '@/api/hmmm/directorys.js'
import { list as tagApi } from '@/api/hmmm/tags'

// import {detail } from '@/api/hmmm/directorys'

import Page from '@/components/questions/page.vue'
import importExcel from '@/components/questions/importExcel.vue'
import * as enumObj from '@/api/hmmm/constants'
import dayjs from 'dayjs'
export default {
  components: {
    Info,
    Page,
    importExcel
  },
  data () {
    return {
      form: {
        subjectID: '',
        creatorID: '',
        catalogID: '',
        tags: '',
        questionType: '',
        difficulty: '',
        direction: '',
        remarks: '',
        enterpriseID: '',
        shortName: '',
        name: '',
        provAndCity: {
          province: '',
          city: ''
        }
      },
      importDialogShow: false,
      // 学科
      subjectIDD: [],
      // 标签
      labellist: [],
      total: 0,
      tableData: [],
      provincesList: [],
      citysList: [],
      data: {
        page: 1,
        pagesize: 5
      },
      // 方向
      clerk: enumObj.direction,
      // 录入人
      role: baseApi.role,
      // 难度
      difficulty: enumObj.difficulty,
      // types
      types: enumObj.questionType,
      page: 1,
      pagesize: 2,
      options: [],
      from: {
        province: ''
      },
      showDialog: false,
      UserID: {},
      value: '',
      // 二级目录
      catalog: [],

      subjectval: '',
      // 二级数据的id
      twoID: {},
      // 所有数据
      alllist: [],

      // 城市
      provincee: [],
      cityyy: [],

      dat: {
        subjectID: '',
        page: 1,
        pagesize: 5
      },
      da: {
        keyword: '',
        page: 1,
        pagesize: 5
      },
      d: {
        subjectID: '',
        page: 1,
        pagesize: 5,
        keyword: ''
      },
      loading: false
    }
  },
  created () {
    this.getUserinfo()
  },
  mounted () {
    const one = this.$refs.two

    window.addEventListener('scroll', function () {
      const h = document.documentElement.scrollTop

      if (h > 100) {
        one.style.opacity = 0.8
      } else {
        one.style.opacity = 0
      }
    })
  },

  methods: {
    /**
     * 批量导入题库信息
     */
    importExcel () {
      this.importDialogShow = true
    },
    /**
     * 批量excel导出题库信息
     */
    async exportExcel () {
      const headersArr = [
        '试题编号',
        '学科',
        '目录',
        '题型',
        '难度',
        '题干',
        '答案解析',
        '录入人',
        '录入时间'
      ]
      const headersRelations = {
        试题编号: 'number',
        学科: 'subject',
        目录: 'catalog',
        题型: 'questionType',
        题干: 'question',
        难度: 'difficulty',
        答案解析: 'answer',
        录入人: 'creator',
        录入时间: 'addDate'
      }
      const {
        data: { items }
      } = await list(1, this.total)
      const arr = this.formatDate(items, headersRelations, headersArr)
      import('@/vendor/Export2Excel').then((excel) => {
        excel.export_json_to_excel({
          header: headersArr,
          data: arr,
          filename: '面试基础题库',
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    },
    /**
     * excel导出数据处理
     */
    formatDate (items, headersRelations, headersArr) {
      const result = []
      items.forEach((item) => {
        const tempArr = []
        headersArr.forEach((key) => {
          const englishKey = headersRelations[key]
          let value = item[englishKey]
          if (englishKey === 'addDate') {
            value = this.formateTime(value)
          }
          if (englishKey === 'questionType') {
            value = this.questionTypeFordata(value)
          }
          if (englishKey === 'difficulty') {
            value = this.difficultyFordata(value)
          }
          if (['question', 'answer'].includes(englishKey)) {
            value = this.delHtmlTag(value)
          }
          tempArr.push(value)
        })
        result.push(tempArr)
      })
      return result
    },
    delHtmlTag (str) {
      return str.replace(/<[^>]+>/g, '') // 去掉所有的html标记
    },
    /**
     * 处理时间
     */
    formateTime (time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    /**
     * 难度数据处理
     */
    difficultyFordata (val) {
      let res = ''
      enumObj.difficulty.forEach((k) => {
        if (k.value === val) {
          res = k.label
        }
      })
      return res
    },
    /**
     * 题型数据处理
     */
    questionTypeFordata (val) {
      let res = ''
      enumObj.questionType.forEach((k) => {
        if (k.value === val) {
          res = k.label
        }
      })
      return res
    },
    ding () {
      scrollTo(0, 0)
    },
    // 初始页面数据
    async getUserinfo () {
      if (this.d.subjectID === '') {
        delete this.d.subjectID
      }
      if (this.d.keyword === '') {
        delete this.d.keyword
      }

      const { data } = await list(this.d)

      this.total = data.counts

      this.tableData = data.items
    },
    // 省
    province () {
      const res = provinces()
      this.provincee = res
    },
    // 地区
    city () {
      const res = citys(this.form.provAndCity.province)
      this.form.provAndCity.city = ''
      this.cityyy = res
    },

    async seek () {
      this.loading = true
      // this.d.subjectID=''
      // this.d.keyword=''
      this.d.pagesize = 999

      // 关键字没输入的时候

      if (this.form.name === '') {
        // console.log(1);

        const res = await list(this.d)
        this.tableData = res.data.items
        this.d.page = 1
        this.total = res.data.counts
      }

      // 学科没输入的时候

      if (this.subjectval === '') {
        this.d.keyword = this.form.name

        const { data } = await list(this.d)

        this.tableData = data.items
        this.d.page = 1
        this.total = data.counts
      }
      if (this.subjectval === '' && this.form.name === '') {
        this.getUserinfo()
        // ('321321');
      } else {
        console.log(this.d)
        this.d.keyword = this.form.name
        // console.log(this.d);
        const { data } = await list(this.d)
        this.tableData = data.items
        this.d.page = 1
        this.total = data.counts
      }
      this.loading = false
    },

    // 学科
    async listA () {
      const res = await simpleapi()
      const page = { pagesize: '' }
      page.pagesize = res.data.length

      const { data } = await listApi(page)
      // console.log(data);
      this.subjectIDD = data.items
    },
    async change (data, itemm) {
      this.dat.subjectID = data.id
      this.d.subjectID = data.id

      this.form.catalogID = ''
      this.form.tags = ''

      this.twoID = data
      this.subjectval = itemm
      // 二级目录
      const page = { pagesize: '999' }
      const ress = await listmuApi(page)
      // console.log(ress);
      const arrr = ress.data.items
      this.catalog = arrr.filter((item) => item.subjectName === itemm)

      // 标签

      const res = await tagApi(page)

      const arr = res.data.items
      this.labellist = arr.filter((item) => item.subjectName === itemm)
    },

    // 重置
    move () {
      // 1111111111
      this.d.subjectID = ''
      this.subjectval = ''
      this.form = {
        subjectID: '',
        catalogID: '',
        tags: '',
        questionType: '',
        difficulty: '',
        direction: '',
        remarks: '',
        enterpriseID: '',
        name: '',
        shortName: '',
        provAndCity: {
          province: '',
          city: ''
        }
      }
    },

    time (time) {
      return dayjs(time).format('YYYY-MM-DD HH:hh:mm')
    },
    formatter (row, column, cellValue, index) {
      // console.log(cellValue);
      if (cellValue === '1') {
        return '单选'
      } else if (cellValue === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    forma (row, column, cellValue, index) {
      if (cellValue === '1') {
        return '简单'
      } else if (cellValue === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    // 预览
    print (id) {
      //  let res=await detail(id)
      //  console.log(res);

      this.UserID = id
      this.showDialog = true
    },

    // 精选
    love (row) {
      row.choiceState = 1
      // console.log(row);
      this.$confirm('确定添加到精选题库吗?').then(async () => {
        await choiceAdd(row)
        this.$message.success('添加成功')
        this.getUserinfo()
      })
    },

    // 删除
    del (id) {
      this.$confirm('确定删除吗?').then(async () => {
        await remove(id)
        this.$message.success('删除成功')

        // this.d.page=1
        // console.log(this.tableData);
        if (this.tableData.length === 1) {
          this.d.page = 1
        }
        this.getUserinfo()
      })
    },
    // 页码发生变化
    handleCurrentChange (val) {
      this.d.page = val

      this.getUserinfo()
    },
    /**
     * 当前页面数量变化
     */

    handleSizeChange (val) {
      //   this.pageSize = val;
      // this.page = 1;
      this.d.pagesize = val
      this.d.page = 1

      this.getUserinfo()
      // 111
    }
  }
}
</script>

<style scoped lang='scss'>
.one {
  margin-top: 50px;
}
span {
  font-size: 9px;
  color: pink;
}
.xueke {
  display: inline;
  height: 30px;
}
.top {
  display: inline;
  height: 30px;
}
label {
  width: 80px;
  display: inline-block;

  text-align: right;
  margin-right: 3px;
}
.info {
  margin-bottom: 20px;
}
.subject {
  text-align: right;
}
.button {
  float: right;
  width: 97px;
  height: 32px;
  text-align: center;
  font-size: 10px;
  margin-left: 10px;
}
.function {
  float: right;
  margin-bottom: 20px;
}
// .input {
//   width: 229px;
// }
// .qqq {
//   position: absolute;
//   top: 0px;
//   right: 15px;
// }
// .el-form-item {
//   width: 270px;
// }
// .region {
//   margin-left: 30px;
// }

//查看
.view {
  background-color: rgba(124, 183, 212, 0.3);
  font-size: 10px;
}

//修改
.edit {
  background-color: rgba(83, 187, 106, 0.3);
  font-size: 10px;
}
.delete {
  background-color: rgba(203, 53, 53, 0.3);
  font-size: 10px;
}

.love {
  background-color: rgba(179, 194, 40, 0.3);
  font-size: 10px;
}
.ding {
  width: 40px;
  height: 40px;
  background: linear-gradient(to right, #1493fa, #01c6fa);
  position: absolute;
opacity :0;
  text-align: center;
  border-radius: 50%;
  line-height: 100px;
  bottom: 100px;
  right: 100px;
  z-index: 99999;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep {
  // .el-input {

  //   width: 200px;
  // }
  .el-col.el-col-6 {
    padding: 0;
  }
  .el-form {
    margin-top: 30px;
  }
  .el-icon-view {
    color: rgba(26, 31, 33, 0.3);
  }
  .is-in-pagination {
    width: 50px;
  }
  .el-select.el-select--medium {
    width: 100%;
  }
  .province.el-select.el-select--medium {
    width: 50%;
  }

  // .el-input--small {
  //   width: 239px;
  //   height: 36px;
  // }

  // .el-select {
  //   width: 230px;
  //   margin-bottom: 30px;
  // }

  // .el-pagination {
  //   float: right;
  //   margin: 30px;
  // }
  // .el-pagination__sizes{
  //   width: 150px;
  // }
}
</style>
